<template>
<div class="app">
  <div v-width="400" class="log">
    <Form
      ref="form"
      :validOnChange="validOnChange"
      :showErrorTip="showErrorTip"
      :labelPosition="labelPosition"
      :labelWidth="110"
      :rules="validationRules"
      :model="model"
    >
    <div align:center>
      <div class="header"><h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;秒秒测登陆页面</h1></div>
      <FormItem label="用户名">
        <template v-slot:label><i class="h-icon-user"></i> 用户名</template>
        <input type="text" v-model="username">
      </FormItem>
      <FormItem label="密码" icon="h-icon-complete">
        <input type="password" v-model="password">
      </FormItem>
      <FormItem>
        <Button color="primary" :loading="isLoading" @click="submit">登录</Button>&nbsp;&nbsp;&nbsp;
        <a href="./register">注册</a>
        <a href="./mima">忘记密码</a>
      </FormItem>
    </div>
    </Form>
  </div>
</div>
</template>
<style>
  /* .header{
    background-color: rgb(255, 255, 255);
    width: 50%;
    height: 30%;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(50%);
  } */
  .log{
    background-color: rgb(255, 255, 255);
    width: 50%;
    height: 30%;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .app{
    background-color: #B3C0D1;
    background-image: url("../assets/img/1.jpg");
    height: 100%;
    width: 100%;
  }
</style>
<script>
import { login_post } from './axios_api/api';
export default {
  data() {
    return {
        username:"",
        password:"",
      isLoading: false,
      labelPosition: 'left',
     
      model: {
        username: '',
        password: ''
      },
      validationRules: {
        required: ['name', 'password']
      },
      showErrorTip: true,
      validOnChange: true
    };
  },
  methods: {
    submit() {
        if(this.username==""){
            this.$Message("用户名不能为空")
        }else if(this.password==""){
            this.$Message("密码不能为空")
        }
        var data = {username:this.username,password:this.password};
        console.log(data)
        login_post(data).then(resp=>{
            if(resp.code==200){
                this.$Message(resp.message);
                localStorage.setItem('username', resp.username);
				localStorage.setItem('uid', resp.uid);
                localStorage.setItem('jwt', resp.jwt);
                localStorage.setItem('type', resp.type);
                this.$router.push({path:"/header"})
            }else{
                this.$Message(resp.message)
            }
            
        })
    },
    reset() {
      this.$refs.form.resetValid();
    }
  }
};
</script>